import { TodoItem } from './TodoItem';

// 导入 useSelector
import { useSelector, useDispatch } from 'react-redux';

// 导入 action 生成器
import { toggleAll } from '../store/actions/todos';

export const TodoMain = () => {
  // 从 redux 中获取数据
  const todos = useSelector((state) => state.todos);
  // 计算是否全部选中的状态
  const isCheckAll = todos.every((item) => item.done);
  // console.log('isCheckAll1', isCheckAll);

  const dispatch = useDispatch();

  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        checked={isCheckAll}
        onChange={(e) => {
          // console.log('target value', e.target.checked);
          // console.log('isCheckAll2', isCheckAll);
          // 发送 action 处理数据
          dispatch(toggleAll(!isCheckAll));
        }}
        type="checkbox"
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {todos.map((item) => {
          return <TodoItem key={item.id} {...item} />;
        })}
      </ul>
    </section>
  );
};
